@extends('WShop::layout')
@push('styles')
    <link rel="stylesheet" href="{{asset(config('view.frontend.wap_login').'/lottery//common/css/swiper.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.frontend.wap_login').'/lottery/common/css/common_mobile.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/css/index.css?version=1.0.0')}}">
    <!-- 移动端适配-->
    <script>
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize', changeRem);

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            //console.log( width );
            html.style.fontSize = width / 10 + 'px';
        }
    </script>
@endpush
@section('content')
<div id="wrap">
    <div class="rule"></div>
    <a href="{{route('f_wap_lottery_mywin')}}" id="myWin">
        <div class="my"></div>
    </a>
    <!--砸蛋区域-->
    <div class="box">
        <p class="tips">剩余<span id="change">{{$can_cj_times}}</span>次</p>
        <div id="hammer" class="shak"></div>
        <ul class="egg clearfix">
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>
            <li>
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/egg.png')}}" class="goldegg init">
                <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/base.png')}}">
                <div class="info"></div>
            </li>

        </ul>
        <!--奖品展示-->
        <div class="awards">
            <img src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/prize.png')}}" class="prize">
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    @foreach($prizes as $prize)
                        <li class="swiper-slide">
                            <img src="{{$prize->cover}}">
                            <p>{{$prize->title}}</p>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <!--游戏规则弹窗-->
    <div id="mask-rule">
        <div class="box-rule">
            <span class="star"></span>
            <h2>活动规则说明</h2>
            <span id="close-rule"></span>
            <div class="con">
                <div class="text">
                    {{$mask_rule}}
                </div>
            </div>
        </div>
    </div>
    <!--中奖提示-->
    <div id="mask">
        <div class="blin"></div>
        <div class="caidai"></div>
        <div class="winning">
            <div class="red-head"></div>
            <div class="red-body"></div>
            <div id="card">
                <a href="" target="_self" class="win"></a>
            </div>
            <a href="{{route('f_wap_lottery_mywin')}}" target="_self" class="btn"></a>
            <span id="close"></span>
        </div>
    </div>
</div>


    @include('WShop::public.foot_bar')
@endsection
@push('scripts')
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/lottery/common/js/swiper.jquery.min.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/lottery/common/js/jquery.cookie.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/lottery/common/js/h5_game_common.js?version=1.0.0')}}"></script>
{{--    <script src="{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/js/index.js?version=1.0.0')}}"></script>--}}
    <script>
        $(function () {
            $.cookie('eggIndex', null);
            var count={{$can_cj_times}};
            var $hammer = $("#hammer"),
                $tips = $(".info"),
                $eggList = $(".egg li"),//金蛋父级
                $egg = $(".goldegg"),//金蛋
                $change = $("#change"),//剩余次数
                length = $egg.length,
                data = {count: count},//次数
                arr = [],
                openArr,//记录被砸开的蛋的下标数组
                rem = 75;

            /*轮流提示*/
            $(function () {
                if (!!$.cookie("eggIndex")) {//如果存在cookie，也就是有金蛋被砸开
                    openArr = $.cookie("eggIndex").split(",");//将cookie变为数组
                    for (var i = 0; i < openArr.length; i++) {
                        arr.push(parseFloat(openArr[i]));//将上次cookie存入数组以免上次cookie被覆盖
                        $egg.eq(parseFloat(openArr[i])).prop("src", "{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/step3.png')}}");
                        $egg.eq(parseFloat(openArr[i])).removeClass("init");
                        $egg.eq(parseFloat(openArr[i])).data("mark", false);//更改金蛋状态为已砸开
                    }
                }

                //初始跳动
                $egg.eq(length).addClass("jump");
                $tips.eq(length).show();
                setInterval(function () {
                    //金蛋跳动
                    length++;
                    length %= 9;
                    $egg.eq(length - 1 < 0 && 8 || length - 1).removeClass("jump");
                    $tips.eq(length - 1 < 0 && 8 || length - 1).hide();
                    reback();
                    $egg.eq(length).addClass("jump");
                    $tips.eq(length).show();
                }, 1000);
            });

            //跳过砸开的金蛋
            function reback() {
                if (!$egg.eq(length).hasClass("init")) {//若已砸开
                    length++;
                    length %= 9;
                    reback();
                }
            }

            /*砸蛋事件*/
            for (var i = 0; i < length; i++) {
                $egg.eq(i).data("mark", true);//判断金蛋是否砸开，true表示可砸
                $eggList.eq(i).data("i", i);
                $eggList.eq(i).click(function () {
                    //设定剩余抽奖次数，判断用户是否还能点击
                    if (data.count > 0) {
                        $egg.eq($(this).data("i")).data("mark") ? eggChange($(this).data("i")) : alert("这枚金蛋已经被您砸开了");//判断金蛋是否已砸开
                    } else {
                        alert("您当前砸蛋次数为0，无法砸蛋");
                    }
                });
            }

            /*砸蛋事件的处理*/
            function eggChange(i) {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: 'post',
                    url: "{{route('f_wap_lottery_zan')}}",
                    dataType: 'json',
                    data: {}
                }).done(function (response) {
                    console.log(response);
                    if(response.status){
                        //砸蛋次数的变化
                        data.count--;
                        $change.html(data.count);
                        $hammer.removeClass("shak");//清除锤子晃动动画
                        //锤子砸蛋的位置
                        (i === 0 || i === 3 || i === 6) && ($hammer.css("left", 165 / rem + "rem"));
                        (i === 1 || i === 4 || i === 7) && ($hammer.css("left", 415 / rem + "rem"));
                        (i === 2 || i === 5 || i === 8) && ($hammer.css("left", 665 / rem + "rem"));
                        (i === 0 || i === 1 || i === 2) && ($hammer.css("top", 60 / rem + "rem"));
                        (i === 3 | i === 4 || i === 5) && ($hammer.css("top", 280 / rem + "rem"));
                        (i === 6 | i === 7 || i === 8) && ($hammer.css("top", 500 / rem + "rem"));
                        //锤子返回
                        setTimeout(function () {
                            $hammer.css({
                                left: 665 / rem + "rem",
                                top: 60 / rem + "rem"
                            });
                        }, 1500);

                        //金蛋破裂及锤子动画
                        setTimeout(function () {
                            $hammer.addClass("hit");
                            setTimeout(function () {
                                $egg.eq(i).prop("src", "{{asset(config('view.frontend.wap_login').'/lottery/goldEgg2/image/step3.png')}}");
                            }, 300);
                            setTimeout(function () {
                                $egg.eq(i).removeClass("init");

                                win();

                                $hammer.removeClass("hit");//清除锤子砸蛋动画
                                $hammer.addClass("shak");

                                //记录被砸开的蛋
                                arr.push(i);//存入每个砸开蛋的下标
                                $.cookie("eggIndex", arr, {expires: 1});//存入cookie
                            }, 600);
                        }, 600);
                        $egg.eq(i).data("mark", false);//更改金蛋状态为已砸开



                        // mui.toast(response.msg);
                    }else{
                        mui.toast(response.msg);
                    }
                }).fail(function (XMLHttpRequest) {
                    if (XMLHttpRequest.status == 422) {
                        var errors = XMLHttpRequest.responseJSON.errors;
                        if(typeof errors == 'object') {
                            for (var index in errors) { // 不推荐这样
                                mui.toast(errors[index][0]);
                                break;
                            }
                        }else{
                            mui.toast(XMLHttpRequest.responseJSON.msg);

                        }
                    }else{
                        mui.toast('网络异常,请检查连接');
                    }

                }).always(function () {

                });


            }

            //奖品展示
            var show = new Swiper(".swiper-container", {
                direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动
                loop: false,//是否循环
                slidesPerView: "auto"//自动根据slides的宽度来设定数量
            });
        });
    </script>
@endpush